<template>
  <div>
    <div class="select-box">
      <el-form :inline="true" :model="selectData1" class="demo-form-inline">
        <el-form-item label="字典名称">
          <el-input v-model="selectData1.dictName" placeholder="请输入字典名称">
          </el-input>
        </el-form-item>
        <el-form-item label="字典标签">
          <el-input
            v-model="selectData1.dictLable"
            placeholder="请输入字典标签"
          />
        </el-form-item>
        <el-form-item label="字典类型">
          <el-input v-model="selectData1.dictType" placeholder="请输入字典类型">
          </el-input>
        </el-form-item>

        <el-form-item label="字典键值">
          <el-input
            v-model="selectData1.dictValue"
            placeholder="请输入字典键值"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetForm">重置</el-button>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <!-- <el-button type="primary" @click="isShow=false">重置</el-button> -->
          <el-button type="primary" @click="addInfo">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
   
    <el-table :data="dataList.comList" style="width: 100%">
      <el-table-column prop="dictId" label="NO" width="180" />
      <el-table-column prop="dictName" label="字典名称" width="170" />
      <el-table-column prop="dictLable" label="字典标签" width="170" />
      <el-table-column prop="dictType" label="字典类型" width="170" />
      <el-table-column prop="dictValue" label="字典值" width="170">
      </el-table-column>

      <el-table-column
        prop="createTime"
        label="创建时间"
        width="170"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        type="date"
      />
      <el-table-column prop="createTime" label="操作" width="170">
        <template #default="scope">
          <el-button
            link
            size="small"
            type="primary"
            @click="openFormDialog(scope.$index, scope.row)"
            icon="el-icon-edit"
          >
            <el-icon :span="20"><Edit /> 修改</el-icon>
          </el-button>
          <el-button
            link
            size="small"
            type="primary"
            @click="del(scope.$index, scope.row)"
            icon="el-icon-edit"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="currentChange"
      @size-change="sizeChange"
      layout="prev, pager, next"
      :total="selectData1.count * 2"
    />
  </div>
  <!-- 修改 -->
  <el-dialog v-model="dialogFormVisible" title="修改信息" width="400px">
    <el-form :model="active">
      <el-row>
      <el-form-item label="字典名称" label-width="80px">
        <el-input v-model="active.dictName" autocomplete="off" />
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item label="字典标签" label-width="80px">
        <el-input v-model="active.dictLable" autocomplete="off" />
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item label="字典类型" label-width="80px">
        <el-input v-model="active.dictType" autocomplete="off" />
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item label="键值" label-width="80px">
        <el-input v-model="active.dictValue" autocomplete="off" />
      </el-form-item>
    </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="updateInfo()">确定修改</el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 新增 -->
</template>

<script lang="ts"> 
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  onMounted,
  ref,
} from "vue";

import { getDictList, getAddList, delList, getEditList } from "@/request/api";
import { InitData1 } from "@/type/dict";
import { ElMessage, ElMessageBox } from "element-plus";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
 
export default defineComponent({
  setup() {
    const dialogFormVisible = ref(false);
    const data = reactive(new InitData1());
    //获取字典列表
    const getDicts = () => {
      // eslint-disable-next-line @typescript-eslint/ban-types
      const getparam: Object = {
        dictId: data.selectData1.dictId,
        dictLable: data.selectData1.dictLable,
        dictType: data.selectData1.dictType,
        dictValue: data.selectData1.dictValue,
        createTime: data.selectData1.createTime,
        dictName: data.selectData1.dictName,
      };
      getDictList(getparam).then((res) => {
        data.list1 = res.data;
        data.selectData1.count = res.data.length;
      });
    };
    // 新增功能

    // eslint-disable-next-line @typescript-eslint/ban-types
    const addInfo: Object = () => {
      const params = {
        dictLable: data.selectData1.dictLable,
        dictType: data.selectData1.dictType,
        dictValue: data.selectData1.dictValue,
        createTime: data.selectData1.createTime,
        dictName: data.selectData1.dictName,
      };
      // 传递参数
      getAddList(params).then((res) => {
        console.log(res);

        getDicts();
      });
    };
    //删除
    const del = (index: number, row: any) => {
      ElMessageBox.confirm("确定删除？", "Warning", {
        type: "warning",
      }).then(() => {
        delList(row.dictId).then((res: any) => {
          console.log(res);
          ElMessage.success("删除成功");
          getDicts(); //删成功刷新字典列表数据
        });
      });
    };
    //查询
    const onSubmit = () => {
      const selparams = {
        dictId: data.selectData1.dictId,
        dictLable: data.selectData1.dictLable,
        dictType: data.selectData1.dictType,
        dictValue: data.selectData1.dictValue,
        createTime: data.selectData1.createTime,
        dictName: data.selectData1.dictName,
      }
      getDictList(selparams).then((res) => {
        console.log(res);
        getDicts();
      });
    };

    //分页
    const dataList = reactive({
      comList: computed(() => {
        /*
              第一页--》展示1-5条数据
              第二页--》展示6-10条数据
              第三页--》展示11条数据
              ......
              */
        return data.list1.slice(
          (data.selectData1.page - 1) * data.selectData1.pagesize, //page==1--->0,page==2---->5
          data.selectData1.page * data.selectData1.pagesize //page==1--->5,page==2---->10
        );
      }),
    });
    const currentChange = (page: number) => {
      data.selectData1.page = page;
    };
    const sizeChange = (pagesize: number) => {
      data.selectData1.pagesize = pagesize;
    };
    //重置
    const resetForm = () => {
      data.selectData1.dictLable = "";
      data.selectData1.dictType = "";
      data.selectData1.dictValue = "";
      data.selectData1.dictName = "";
    };
    //修改
    const active = reactive<any>({
      dictName: "",
      dictType: "",
      dictValue: "",
      dictLable: "",
      dictId: "",
    });
    let openFormDialog = (index: number, row: any) => {
      console.log(row);
      active.dictName = row.dictName;
      active.dictType = row.dictType;
      active.dictValue = row.dictValue;
      active.dictLable = row.dictLable;
      active.dictId = row.dictId;
      console.log("active", active);
      dialogFormVisible.value = true;
    };
    const updateInfo = () => {
      getEditList(active).then((res) => {
        console.log(res);

        getDicts();
      });
      dialogFormVisible.value = false;
    };

    onMounted(() => {
      getDicts();
    });

    return {
      ...toRefs(data),
      dialogFormVisible,
      onSubmit,
      currentChange,
      sizeChange,
      dataList,
      resetForm,
      del,
      addInfo,
      openFormDialog,
      active,
      updateInfo,
    };
  },
  methods: {},
});
</script>

<style scoped>
.el-form-item {
  float: right;
}

.el-pagination {
  float: right;
}
.el-form-item__content {
  float: right;
}
/* .el-dialog {
  width: 200px;
} */
</style>
